{% extends "base.html" %}
{% block body %}
<div class="container-fluid">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active" ></li>
    <li data-target="#carousel-example-generic" data-slide-to="1" ></li>
    <li data-target="#carousel-example-generic" data-slide-to="2" ></li>
  </ol>


  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
    {% load staticfiles %}
      <img src="{%static "pic/cloud.jpg"%}" alt="...">
      <div class="carousel-caption">
      	 这里是一个测试
      </div>
    </div>
    <div class="item">
      <img src="{%static "pic/cloud.jpg"%}" alt="...">
      <div class="carousel-caption">
        	这里又是一段话
      </div>
    </div>
        <div class="item">
      <img src="{%static "pic/cloud.jpg"%}" alt="...">
      <div class="carousel-caption">
     	  这里还是一段话
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

 <!-- show table -->

<div class="container-fluid">
<div class="row">
  <div id="main1" class="col-md-6" style="height:400px;"></div>
  <div id="main2" class="col-md-6" style="height:400px;"></div>
  <div id="main3" class="col-md-6" style="height:400px;"></div>
  <div id="main4" class="col-md-6" style="height:400px;"></div>
</div>
</div>
  <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
       	var myChart3 = echarts.init(document.getElementById('main3'));
        var myChart4 = echarts.init(document.getElementById('main4'));
        
	var option1 = {
    title : {
        text: '工作选择',
        subtext: '基于数据分析',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        //data: ['Java工程师','C++工程师','IOS工程师','安卓工程师','运维工程师','前端工程师','算法工程师','PHP工程师','测试工程师','安全工程师','C#工程师','数据库工程师','其他']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'Java工程师'},
                {value:310, name:'C++工程师'},
                {value:234, name:'IOS工程师'},
                {value:135, name:'安卓工程师'},
                {value:1548, name:'运维工程师'},
                {value:335, name:'前端工程师'},
                {value:310, name:'算法工程师'},
                {value:135, name:'PHP工程师'},
                {value:1548, name:'测试工程师'},
                {value:310, name:'安全工程师'},
                {value:234, name:'C#工程师'},
                {value:135, name:'数据库工程师'},
                {value:1548, name:'其他'},
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 20,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
	};
	
	
	var data =
    [[42,33,1300,'华为','华为'],[39,28,1200,'百度','百度'],[42,30,1100,'阿里','阿里'],[44,33,1222,'腾讯','腾讯']];

	option2 = {
    title: {
        text: '公司相关信息'
    },
    legend: {
        right: 10,
        data:['华为','百度','阿里','腾讯']
    },
    xAxis: {
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
        name:"面试难度",
    },
    yAxis: {
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
        scale: true,
        name:"评分",
    },
    series: [ {
        data: data,
        type: 'scatter',
        symbolSize: function (data) {
            return Math.sqrt(data[2]);
        },
        label: {
            emphasis: {
                show: true,
                formatter: function (param) {
                    return param.data[3];
                },
                position: 'top'
            }
        },
        itemStyle: {
            normal: {
                    shadowBlur: 20,
                    shadowOffsetX: 0,
                    color: function(params) { 
                    var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ]; 
                    return colorList[params.dataIndex] 
                },
            }
        }
    }]
	};
	
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
        myChart2.setOption(option2);
    </script>

{% endblock %}

